<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/base.jsp" %>

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" media="all">
	<link rel="stylesheet" href="/FortAwesome-Font-Awesome-ee55c85/css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="/css/index.css" media="all">
</head>
<body>
	<div class="container">
		<%--top --%>
		<%@ include file="include/top.jsp" %>
		<%--head --%>
		<div class="head">
			<div class="logo">
				<i class="icon-github"></i>
				<div class="text">bookstore</div>
				<div class="clear"></div>
			</div>
			<!-- search -->
			<div class="input-append search">
			  <input class="span4" id="appendedInputButton" type="text">
			  <button class="btn" type="button">搜索</button>
			</div>
			<div class="shopcar">
				<a href="shopcar.jspx" class="btn btn-large">
					<i class="icon-shopping-cart"></i>
					购物车
				</a>
			</div>
			<div class="clear"></div>
		</div>
		<div class="content">
			<div class="type"><!-- 分类 -->
				<div class="navbar">
				  <div class="navbar-inner">
				    <a class="brand" href="#">
				    	<i class="icon-paper-clip"></i>
				    	图书分类
				    </a>
				  </div>
				</div>
				<div class="type_content">
					<ul>
						<c:forEach items="${requestScope.listBookType}" var="bookType">
							<li><a class="type_a" href="#">${bookType.typeName}</a></li>
						</c:forEach>
					</ul>
				</div>
			</div>
			<div class="center"> <!-- 切换图片广告 -->
				<div class="ads">
					<div style="position:relative;width:565px;height:215px">
						<div><img name="ad" src="/img/1.jpg" alt=""></div>
						<div><img name="ad" src="/img/2.jpg" alt=""></div>
						<div><img name="ad" src="/img/3.jpg" alt=""></div>
						<div><img name="ad" src="/img/4.jpg" alt=""></div>
						<div><img name="ad" src="/img/5.jpg" alt=""></div>
						<div style="position:absolute;right:10px;bottom:10px">
							<a name="a_ad" href="">1</a>
							<a name="a_ad" href="">2</a>
							<a name="a_ad" href="">3</a>
							<a name="a_ad" href="">4</a>
							<a name="a_ad" href="">5</a>
						</div>
					</div>
				</div>

			</div>
			<div class="sort">
				<div class="navbar">
				  <div class="navbar-inner">
				    <a class="brand" href="#">
				    	<i class="icon-tasks"></i>
				    	销售排行榜
				    </a>
				  </div>
				</div>
				<div class="sort_content">
					<ul>
						<li><a class="sort_a" href="#">Web开发</a></li>
						<li><a class="sort_a" href="#">数据库维护</a></li>
						<li><a class="sort_a" href="#">网络与通信</a></li>
						<li><a class="sort_a" href="#">编程语言</a></li>
						<li><a class="sort_a" href="#">IT服务管理</a></li>
						<li><a class="sort_a" href="#">Web开发</a></li>
						<li><a class="sort_a" href="#">数据库维护</a></li>
						<li><a class="sort_a" href="#">网络与通信</a></li>
						<li><a class="sort_a" href="#">编程语言</a></li>
						<li><a class="sort_a" href="#">IT服务管理</a></li>
					</ul>
				</div>
			</div>
			<div class="books">
				<table class="table">
					<thead>
						<tr>
							<th>
								<i class="icon-list"></i>
								商品列表
							</th>
						</tr>						
					</thead>
					<tbody>
						<c:forEach items="${requestScope.listBook}" var="book">
							<tr>
								<td>
									<img src="${book.pic}" alt="" class="book">
									<div class="info">
										<h4><a class="bookName" href="product.jspx?id=${book.id}">${book.bookname}</a></h4>
										<div class="author">作者：${book.bookauthor}</div>
										<div class="publish">出 版 社：${book.bookType.typeName}</div><!-- 有问题 -->
										<div class="old_money">定　 价：<div class="del">${book.price}</div></div>
										<div class="store_money">商 城 价：${book.salePrice}</div>
										<button class="btn btn-warning">放入购物车</button>
										<a class="btn" href="userFav.jspx?id=${book.id}">收藏</a>
									</div>
									<div class="clear"></div>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div class="clear"></div>
		</div>
		<%@ include file="include/foot.jsp" %>
	</div>

	<script type="text/javascript">
		(function(){
			var num=0;
			var st=null;
			function show(){
				//当前广告页可见
				document.getElementsByName("ad")[num].style.display="block";
				//其他广告页不可见
				for(var index=0;index<5;index++){
					if(index!=num){
						document.getElementsByName("ad")[index].style.display="none";
					}
				}
				num++;
				if(num>=5){
					num=0;
				}
				st=setTimeout(show,2000);
			}
			show();
			//给a添加事件
			for(var i=0;i<5;i++){
				//鼠标放上去时的事件
				document.getElementsByName("a_ad")[i].onmouseover=over;
				//鼠标移开时的事件
				document.getElementsByName("a_ad")[i].onmouseout=out;
			}
			var n=0;
			function over(){
				//停止循环
				clearTimeout(st);
				//获得鼠标所在的数字-1
				n=this.innerHTML-1;
				//该图片显示，其他图片不显示
				document.getElementsByName("ad")[n].style.display="block";
				for(var index=0;index<5;index++){
					if(index!=n){
						document.getElementsByName("ad")[index].style.display="none";
					}
				}
			}
			function out(){
				//从n处开始循环显示
				num=n;
				show();
			}
		})();
	</script>
</body>

</html>